<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>机器人</title>
    <link rel="stylesheet" href="index.css">
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body lang="zh">
    <img width="100%" height="100%" src="14.jpg">
    <div class="abs cover contaniner">
        <div class="abs cover pnl">
            <div class="top pnl-head" style="background-image: url(2.jpg);"></div>
            <div class="abs cover pnl-body" id="pnlBody">
                <div class="abs cover pnl-left">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="msg min time" id="histStart">加载历史消息</div>
                        <div class="pnl-list" id="hists">
                            <!-- 历史消息 -->
                        </div>
                        <div class="pnl-list" id="msgs">
                            <div class="msg robot">
                                <div class="msg-left" id="welcomeLeft" worker="用户">
                                    <div class="msg-host photo" id="welcomeIcon" style="background-image: url(&quot;https://www.v5kf.com/files/icons/201711/15118623985.png&quot;);"></div>
                                    <div class="msg-ball" id="welcomeBall"><span>你好，我是只能打字的聊天机器人<br><br>您是想要了解哪些方面呢？</span></div>
                                </div>
                            </div>
                            <div class="msg guest">
                                <div class="msg-right" customer="游客">
                                    <div class="msg-host">
                                        <i class="ic kh"></i>
                                    </div>
                                    <div class="msg-ball" title="今天 17:52:06">你好
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pnl-list hide" id="unreadLine">
                            <div class="msg min time unread">未读消息</div>
                        </div>
                    </div>
                    <div class="abs bottom pnl-text">
                        <div class="abs bottom pnl-ext hide" id="pnlExt">
                            <div class="emoji-pnl scroll hide" id="emojiPnl">
                                <img class="emoji-item" key="/::<>" src="http://static.v5kf.com/images/emoji/qq/2009426203723341.gif" />
                                <img class="emoji-item" key="/::<>" src="http://static.v5kf.com/images/emoji/qq/2009426203723341.gif" />
                            </div>
                        </div>
                        <div class="ques-pnl scroll hide" id="quesPnl">
                            <ul class="questions unselect" id="ques"></ul>
                        </div>
                        <div class="abs top pnl-warn" id="pnlWarn">
                            <div class="fl btns rel pnl-warn-free">
                                <i class="kh warn-btn emoji-btn" title="表情" id="emojiBtn"></i>
                                <i class="kh warn-btn menu-btn" title="菜单" id="menuBtn"></i>
                                <i class="kh warn-btn send-btn" style="display: none; color: rgb(32, 196, 202);" title="发送" id="sendBtn" ></i>
                                <i class="kh warn-btn mute-btn" title="静音" id="muteBtn"></i>
                            </div>
                            <div class="fl btns rel pnl-warn-left" id="pnlBtns">
                            </div>
                            <div class="fl right pnl-warn-right">
                                <span class="sess-status" id="sessStatus"></span>
                                <span id="val-left" style="display:none;">您还可以输入<span id="valleft">450</span>字</span>
                            </div>
                        </div>
                        <div class="abs cover pnl-input">
                            <textarea class="scroll" id="text" wrap="hard" placeholder="在此输入..."></textarea>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom">
                                </ul>
                            </div>
                        </div>
                        <div class="abs br pnl-btn" id="submit" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">发送</div>
                    </div>
                </div>
                <div class="abs right pnl-right">
                    <div class="slider-container hide"></div>
                    <div class="pnl-right-content">
                        <div class="pnl-tabs">
                            <div class="tab-btn active" id="hot-tab">好友列表</div>
                        </div>
                        <div class="pnl-hot">
                            <ul class="rel-list unselect" id="hots">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        let msgFormat ={
            msg:'',
            reciver:''
        }
        let userId = Math.ceil(Math.random()*100000);
        var ws = new WebSocket("ws://8.8.8.64:8081/hello?user="+userId); 
        //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
        ws.onopen = function(){
        　　//当WebSocket创建成功时，触发onopen事件
        console.log("open");
        　　//ws.send("hello"); //将消息发送到服务端
        }
        ws.onmessage = function(e){
        　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
        　　console.log(e.data);
            AddMsg('liu',e.data)
        }
        ws.onclose = function(e){
        　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log(e)
        　　console.log("close");
        }
        ws.onerror = function(e){
        　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        　　console.log(error);
        }
        // 发送信息
        function SendMsg()
        {
            
            var text = document.getElementById("text");
            if (text.value == "" || text.value == null)
            {
                alert("发送信息为空，请输入！")
            }
            if (msgFormat.reciver == "" || msgFormat.reciver == null)
            {
                alert("请选择好友列表！")
            }
            else
            {
                msgFormat.msg = text.value
                ws.send(JSON.stringify(msgFormat))
                AddMsg('default', SendMsgDispose(text.value));
                text.value = "";
            }
        }
        // 发送的信息处理
        function SendMsgDispose(detail)
        {
            detail = detail.replace("\n", "<br>").replace(" ", "&nbsp;")
            return detail;
        }

        // 增加信息
        function AddMsg(user,content)
        {
            var str = CreadMsg(user, content);
            var msgs = document.getElementById("msgs");
            msgs.innerHTML = msgs.innerHTML + str;
        }

        // 生成内容
        function CreadMsg(user, content)
        {
            var str = "";
            if(user == 'default')
            {
                str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\" title=\"今天 17:52:06\">" + content +"</div></div></div>"
            }
            else
            {
                str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(../Images/head.png)\"></div><div class=\"msg-ball\" title=\"今天 17:52:06\">" + content + "</div></div></div>";
            }
            return str;
        }
        $("#submit").click(function(){
            SendMsg()

        })
        $.ajax({
            url:"http://localhost:8080/online?userId="+userId,
            type:"post",
            success:function(e){
                var str="";
                for(var i in e){
                    str += "<li class=\"rel-item\">"+e[i]+"</li>";
                }
                $(".rel-list").append(str);
                $(".rel-item").click(function(){    
                    $(this).parent().children().css("color","black")
                    $(this).css("color","red")
                    $("#histStart").text($(this).text());
                    msgFormat.reciver=$(this).text();
                })
            }
        });
        
    </script>
</body>
</html>